<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息操作</title>
    <style>
        .ds {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <li v-for='(item,index) in stu' v-show='item.flag' :key='item.age'>
            姓名：{{item.name}}年龄：{{item.age}}
            <button @click='delet(item)'>删除</button>
        </li>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            stu: [{
                    name: '小明',
                    age: 18,
                    flag:true
                },
                {
                    name: '小红',
                    age: 30,
                    flag:true
                },
                {
                    name: '小李',
                    age: 22,
                    flag:true
                },
                {
                    name: '小亮',
                    age: 25,
                    flag:true
                },
                {
                    name: '小吕',
                    age: 28,
                    flag:true
                }
            ],
            num: null
        },
        methods: {
            delet(item) {
                // this.stu.splice(index,1)
                item.flag = false
            }
        }
    })
</script>

</html>